<template>
    <div class="boxes">
        <div  class="innovation-head">
            <div class="innovation-text">机场信息</div>
            <input class="innovation-input" v-model="selectData" type="text" @click.stop="reveal" @input="input" maxlength="20"/>
            <button class="innovation-qbuttom" @click="queryData"></button>
        </div>
        <div class="airContent" v-if="unpack2" @click.stop>
            <div class="airBox" id="cityBox8">
                <div class="cityBox-cont" id="cityCont8">
                    <div class="cityBox-item" v-for="key in guolv" @click="res(key)">{{key.airportName}}-{{key.code}}-{{key.py}}</div>
                </div>
                <scrollBar8 :das="scrollNodeX" :change="selectData"></scrollBar8>
            </div>
        </div>
        <airBox v-if="shos" v-on:mes="receive" @click.stop></airBox>
        <div class="innovation-body" :class="{innovationMin:!qShow}" id="airScroll" v-if="data!=''">
            <div class="innovation-box" id="airScrollB">
                <div class="innovation-survey">
                    <div v-text="data.airln_Cd_Name" class="innovation-survey1"></div>
                    <!--<div v-text="data.iATA"></div>-->
                    <!--<div v-text="data.ICAO"></div>-->
                </div>
                <div>
                    <ul class="innovation-distinguish">
                        <li>
                            <span>飞行区等级</span>
                            <span class="innovation-left">{{data.airfieldLvl}}</span>
                        </li>
                        <li>
                            <span>跑道数量</span>
                            <span class="innovation-left">{{data.runwayArticleNumber}}条</span>
                        </li>
                        <li>
                            <span>机场标高</span>
                            <span class="innovation-left">{{data.air_ele}}m</span>
                        </li>
                    </ul>
                </div>
                <div class="innovation-basicI">
                    <ul class="innovation-basic"><li></li><li>{{dataYear.this_year}}</li><li>{{dataYear.last_year}}</li><li>同比增量</li><li>最新排名</li></ul>
                    <ul class="innovation-basic"><li>客流量（人）</li><li>{{dataYear.this_passenger}}</li><li>{{dataYear.last_passenger}}</li><li :class="{compare_top:dataYear.passenger_compare>0,compare_bottom:dataYear.passenger_compare<0}">{{dataYear.passenger_compare}}%</li><li>{{dataYear.passenger_ranking}}</li></ul>
                    <ul class="innovation-basic"><li>货邮量（吨）</li><li>{{dataYear.this_goods}}</li><li>{{dataYear.last_goods}}</li><li :class="{compare_top:dataYear.goods_compare>0,compare_bottom:dataYear.goods_compare<0}">{{dataYear.goods_compare}}%</li><li>{{dataYear.goods_ranking}}</li></ul>
                    <ul class="innovation-basic"><li>起降架次（次）</li><li>{{dataYear.this_flights}}</li><li>{{dataYear.last_flights}}</li><li :class="{compare_top:dataYear.flights_compare>0,compare_bottom:dataYear.flights_compare<0}">{{dataYear.flights_compare}}%</li><li>{{dataYear.flights_ranking}}</li></ul>
                </div>
                <div class="innovation-details nice-btn-dBlue" @click="queryMore" v-show="!qShow">查看详情</div>
                <div class="innovation-block">
                    <div class="innovation-minute">
                        <h4 class="innovation-blockT">基础信息</h4>
                        <ul class="innovation-block">
                            <li>
                                <div class="inn-f">机场全称：</div>
                                <div class="inn-fN">{{data.airln_Cd_Name}}</div>
                            </li>
                            <li>
                                <div class="inn-f">机场四字码：</div>
                                <div class="inn-fN">{{data.ICAO}}</div>
                                <div class="inn-l">机场三字码：</div>
                                <div class="inn-fN">{{data.iATA}}</div>
                            </li>
                            <li>
                                <div class="inn-f">经度：</div>
                                <div class="inn-fN">{{data.city_coordinate_j}}</div>
                                <div class="inn-l">纬度：</div>
                                <div class="inn-fN">{{data.city_coordinate_w}}</div>
                            </li>
                            <li>
                                <div class="inn-f">所在省份：</div>
                                <div class="inn-fN">{{data.province}}</div>
                                <div class="inn-l">所在城市：</div>
                                <div class="inn-fN">
                                    {{data.city}}
                                </div>
                            </li>
                            <li>
                                <div class="inn-f">在飞航班：</div>
                                <div class="inn-fN">
                                    {{data.inTheFlight +"条"}}
                                </div>
                                <div class="inn-l">机位数量：</div>
                                <div class="inn-fN">
                                    {{data.planePositionNumber}}
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="innovation-minute">
                        <h4 class="innovation-blockT">设施条件</h4>
                        <ul class="innovation-block">
                            <li>
                                <div class="inn-f">机场类型：</div>
                                <div class="inn-fN">{{data.airpotCls}}</div>
                                <div class="inn-l">机场类别：</div>
                                <div class="inn-fN">{{data.airpotType}}</div>
                            </li>
                            <li>
                                <div class="inn-f">口岸机场：</div>
                                <div class="inn-fN">
                                    {{data.port}}
                                </div>
                                <div class="inn-l">协调机场：</div>
                                <div class="inn-fN">{{data.coordinateAirport}}</div>
                            </li>
                            <li>
                                <div class="inn-f">特殊机场：</div>
                                <div class="inn-fN">
                                    {{data.specialAirport}}
                                </div>
                                <div class="inn-l">构成原因：</div>
                                <div class="inn-fN">{{data.specialAirportWhy || "-"}}</div>
                            </li>
                            <!--<li>-->
                            <!--<div class="inn-f">可起降机型：</div>-->
                            <!--<div class="inn-fN">-->
                            <!--{{data.modelCanHandle}}-->
                            <!--</div>-->
                            <!--<div class="inn-l">允许起降时间：</div>-->
                            <!--<div class="inn-fN">{{data.allowTheTakeoffAndLanding}}</div>-->
                            <!--</li>-->
                            <li>
                                <div class="inn-f">消防等级：</div>
                                <div class="inn-fN">
                                    {{data.fireLvl||'-'}}
                                </div>
                                <div class="inn-l">灯光条件：</div>
                                <div class="inn-fN">{{data.lightingConditions || "-"}}</div>
                            </li>
                            <li>
                                <div class="inn-f">高峰小时容量：</div>
                                <div class="inn-fN">{{data.coordinateTimeList || '-'}}</div>
                                <div class="inn-l">放行准点率：</div>
                                <div class="inn-fN">{{data.releasePunctuality || '-'}}</div>
                            </li>
                        </ul>
                    </div>
                    <div class="innovation-minute">
                        <h4 class="innovation-blockT">机场交通</h4>
                        <ul class="innovation-block">
                            <li>
                                <div class="inn-f">地铁/铁轨：</div>
                                <div class="inn-fN">
                                    <div class="inn-fNx">{{data.airportShuttleMetro}}</div>
                                    <div class="inn-fNx1"></div>
                                </div>
                                <div class="inn-l">机场巴士：</div>
                                <div class="inn-fN">
                                    <div class="inn-fNx">{{data.airportBus}}</div>
                                    <div class="inn-fNx1"></div>
                                </div>
                            </li>
                            <li>
                                <div class="inn-f">距离市区距离：</div>
                                <div class="inn-fN">
                                    <div class="inn-fNx">{{data.distanceFromDowntown}}</div>
                                    <div class="inn-fNx1"></div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="innovation-minute">
                        <h4 class="innovation-blockT">国际化</h4>
                        <ul class="innovation-block">
                            <li>
                                <div class="inn-f">所属集团：</div>
                                <div class="inn-fN">
                                    <div class="inn-fNx">{{data.membershipGroup}}</div>
                                </div>
                                <div class="inn-l">是否国际机场：</div>
                                <div class="inn-fN">
                                    <div class="inn-fNx">{{data.inter=="1"?"是":"否"}}</div>
                                </div>
                            </li>
                            <li>
                                <div class="inn-f">第三方运营商：</div>
                                <div class="inn-fN">
                                    <div class="inn-fNx">{{data.operator=="否"?"-":data.operator}}</div>
                                </div>
                                <div class="inn-l">运营商名称：</div>
                                <div class="inn-fN">
                                    <div class="inn-fNx">{{data.operatorInput||"-"}}</div>
                                </div>
                            </li>
                            <li>
                                <div class="inn-f">国内航点：</div>
                                <div class="inn-fN">
                                    <div class="inn-fNx">{{data.domestic}}</div>
                                </div>
                                <div class="inn-l">在飞航班和国内航点统计时间：</div>
                                <div class="inn-fN">
                                    <div class="inn-fNx">{{data.inTheFlightTime}}</div>
                                </div>
                            </li>
                            <li>
                                <div class="inn-f">有无补贴政策：</div>
                                <div class="inn-fN">
                                    <div class="inn-fNx">{{data.isRewardPolicy=="否"?"-":"有"}}</div>
                                </div>
                                <div class="inn-l">补贴政策：</div>
                                <div class="inn-fN">
                                    <div class="inn-fNx">{{data.isRewardPolicyText||"-"}}</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <scrollbar :das="scrollNode" v-if="qShow"></scrollbar>
        </div>
    </div>
</template>
<script>
    import scrollBar from '../component/scrollBarUltimate.vue';
    import airBox from '../template/airBox.vue';
    var data={ "success": {"airportDetailInfo":{"id":"26","airln_Cd":"十堰武当山机场","iATA":"WDS","iCAO":"ZHSY","cts_Cha_Nm":"中国","city_coordinate_j":"32.60","city_coordinate_w":"111.92","city_name":"2","air_port":"2","air_lvl":"4C","flg_type":"降B737—800、A320等系列机型","fire_lvl":"","air_ele":"","avg_tem":"","airline_data_state":"2","terrain_data_state":"2","air_subway":"","air_bus":"","air_distance":"15","air_covers":"186","air_terminal":"1","slots_total":"","terminal":"1","air_runway":"1","air_runway_long":"2600","air_runway_wide":"","air_apron":"","air_boarding_bridge":"","air_capacity":"","yeah_air":"2017","air_complete":"388,923","air_Passenger_throughput":"388923","air_Goods_throughput":"","air_line":"12","air_line_domestic":"12","air_line_inter":"0","air_early_date":"","air_acceptance_date":"","air_school_fly_date":"","air_flight_date":"","air_Planned_shipping_time":"","air_target_throughput":"","air_Preliminary_planning_and_city":"","air_Reward_policy":"","employee_id":1,"date":"2017-03-08 23:58:07"},"throughPut":{"iata":"wds","this_year":"2016","last_year":"2015","this_goods":"","last_goods":"","goods_ranking":"211","goods_compare":"","this_passenger":"388923","last_passenger":"","passenger_ranking":"126","passenger_compare":"","this_flights":"4726","last_flights":"","flights_ranking":"130","flights_compare":""}}};
    export default{
        data(){
            return{
                status:'',
                data:'',
                dataYear:'',
                selectData:"",
                selectCode:"",
                guolv:"",
                airport:'',
                scrollNodeX:{
                    parent:"cityBox8",
                    child:"cityCont8",
                    courseN:"course8",
                    sliderN:"slider8",
                    speed:60
                },
                scrollNode:{
                    parent:"airScroll",
                    child:"airScrollB",
                    courseN:"course1",
                    sliderN:"slider1",
                    speed:60
                },
                shos:0,
                unpack2:0,
                qShow:1
            }
        },
        components:{
            scrollbar:scrollBar,
            airBox:airBox,
            scrollBar8:scrollBar
        },
        props:['close'],
        watch:{
            close:function () {
                this.shos=0;
            },
            selectData:function () {
                let arr=[];
                let ley=this.selectData.toUpperCase();
                for(var key in this.airport){
                    this.airport[key].forEach((val)=>{
                        if(val.airportName.toUpperCase().indexOf(ley)!=-1||val.pinyin.toUpperCase().indexOf(ley)!=-1||val.py.toUpperCase().indexOf(ley)!=-1||val.code.toUpperCase().indexOf(ley)!=-1||val.city.toUpperCase().indexOf(ley)!=-1||val.citycode.toUpperCase().indexOf(ley)!=-1){
                            arr.push({
                                airportName:val.airportName,
                                code:val.code,
                                py:val.py
                            })
                        }else if(val.airportName!=''&&val.airportName!=undefined){
                            if(val.airportName.toUpperCase().indexOf(ley)!=-1){
                                arr.push({
                                    airportName:val.airportName,
                                    code:val.code,
                                    py:val.py
                                });
                                return
                            }
                        }else if(val.pinyin!=''&&val.pinyin!=undefined){
                            if(val.pinyin.toUpperCase().indexOf(ley)!=-1){
                                arr.push({
                                    airportName:val.airportName,
                                    code:val.code,
                                    py:val.py
                                });
                                return
                            }
                        }else if(val.py!=''&&val.py!=undefined){
                            if(val.py.toUpperCase().indexOf(ley)!=-1){
                                arr.push({
                                    airportName:val.airportName,
                                    code:val.code,
                                    py:val.py
                                });
                                return
                            }
                        }else if(val.citycode!=''&&val.py!=undefined){
                            if(val.py.toUpperCase().indexOf(ley)!=-1){
                                arr.push({
                                    airportName:val.airportName,
                                    code:val.code,
                                    py:val.py
                                });
                                return
                            }
                        }
                    });
                }
                this.guolv=arr;
            }
        },
        methods:{
            queryData:function (val) {
                if(this.selectData!=""){
                    if(this.selectCode!=""){
                        $.ajax({
                            type:'get',
                            url : 'restful/getAirportDetailInfoByCode',
                            data:{
                                code:this.selectCode
                            },
                            dataType : 'jsonp',
                            success:(data)=>{
                                this.data=data.success.airportDetailInfo;
                                this.dataYear=data.success.throughPut;
                                let status={
                                    chd:[0,0,0],
                                    jhd:[0,0],
                                    fhd:[0,0,0],
                                    qhd:[0,0,0,0,0],
                                    uhd:[0,0,0],
                                    xhd:[0,0,0],

                                    jczt:[0,0,0],
                                    jclx:[]
                                };
                                data = data.success.airportDetailInfo;
                                if(data.airpotType!=''&&data.airpotType!=undefined){
                                    let a = data.airpotType=="民用机场"?0:1;
                                    status.jhd[a]=1;
                                }
                                this.status=status;
                            },
                        });
                    }else{
                        alert("请在输入框中输入机场名字,并且在选择栏栏中选择")
                    }
                }else{
                    alert("请在输入框中输入机场名字")
                }
            },
            res:function (val) {
                this.selectCode=val.code;
                this.selectData=val.airportName;
                this.shos=0;
                this.unpack2=0;
            },
            input:function () {
                this.shos=0;
                this.unpack2=1;
            },
            reveal:function () {
                this.shos=1;
                this.unpack2=0;
            },
            queryMore:function(){
                this.qShow=1;
            },
            receive:function (val) {
                this.selectCode=val.code;
                this.selectData=val.airportName;
                this.shos=0;
            }
        },
        mounted(){
            this.airport=JSON.parse(sessionStorage.getItem('airportData'));
        },
    }
</script>
<style scoped>
    .innovationMin{
        height: 470px !important;
    }
    .labelx{
        width: 140px;
    }
    .inn-fNs{
        width: 650px !important;
    }
    .airContent,.airBox{
        height: auto !important;
    }
    .airBox{
        max-height: 230px;
        overflow: hidden;
    }
    .cityBox-item{
        font-size: 12px;
        color: white;
        height: 23px;
        line-height: 23px;
        padding-left: 20px;
    }
    .cityBox-item:hover{
        background-color:#25406d;
        color: #be5428;
        cursor:pointer;
        transition: background .3s linear;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#224b79), to(#263763));
        background: -moz-linear-gradient(top, #224b79, #263763);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#224b79', endColorstr='#263763');
    }
    .cityBox-cont{
        position: relative;
    }
</style>